<template>
    <section class="wrapper">
        <div class="filter-wrapper">filter区域
            <el-button
                size="medium"
                type="primary"
                @click="addData"
            >
                添加数据
            </el-button>
        </div>
        <div class="table-wrapper">
            <div
                class="table-wrapper__inner"
                :class="isOverflow ? 'overflow' : ''"
            >
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    ref="table"
                    :height="isOverflow ? '100%' : null"
                >
                    <el-table-column
                        prop="date"
                        label="日期"
                        width="180"
                    />
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="180"
                    />
                    <el-table-column
                        prop="address"
                        label="地址"
                    />
                </el-table>
            </div>
        </div>
        <div class="pagination-wrapper">分页区域</div>
    </section>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            tableData: [],
            isOverflow: false
        };
    },
    mounted() {
        for (let i = 0; i < 2; i++) {
            this.addData();
        }
        this.$nextTick(() => {
            this.calcHeight();
        });
    },
    methods: {
        calcHeight() {
            let tableWrapper = document.querySelector('.table-wrapper').offsetHeight;
            let tableWrapperInner = document.querySelector('.table-wrapper__inner').offsetHeight + 32;

            console.log(tableWrapper, tableWrapperInner);
            this.isOverflow = tableWrapper < tableWrapperInner;

        },

        addData() {
            this.tableData.push({
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            });
            this.calcHeight();
        }
    }
};
</script>

<style scoped lang="scss">
.wrapper {
    display: flex;
    flex-direction: column;
    .filter-wrapper {
        height: 200px;
        flex-shrink: 0;
    }
    .pagination-wrapper {
        height: 60px;
        flex-shrink: 0;
        border-top: 1px solid #eee;
    }
    .table-wrapper {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        &__inner {
            background: #EBEFFB;
            border-radius: 22px;
            padding: 10px 20px 20px 20px;
            border: none;
            &.overflow {
                flex: 1;
                height: 0;
            }
        }
    }
}
</style>